<template>
	<view>
		<view class="status-bar">

		</view>
		<uni-nav-bar left-icon="left" @clickLeft="leftback" :title="title" :border="false" :height="barhig"
			class="header-title" />
		<view class="container" :style="`padding-top:${systemBarHeight+64}px`">
			<view class="header">
				<uni-icons type="checkbox-filled" size="72" color="#0066ff"></uni-icons>
				<text class="suc-icon">预约成功</text>
				<text class="text">您已预约成功，请您持本人身份证按时就诊</text>
			</view>
			<view class="footer">
				<button type="primary" @click="chakan">查看预约详情</button>
				<button type="primary" @click="shouye">返回首页</button>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		ref,
		reactive,
		toRefs,
		onMounted
	} from 'vue'
	import storage from '@/utils/storage.js'
	export default {
		setup() {
			const data = reactive({
				barhig: '120rpx',
				title: '预约信息',
				systemBarHeight: null,
			})
			// #ifdef MP-WEIXIN
			const getCapsule = () => {
				// 获取胶囊位置并改变顶部自定义导航栏的位置
				let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
				console.log(menuButtonInfo, '胶囊top位置')
				//让自定义导航栏头部组件始终和胶囊对齐 做到兼容各手机型号
				data.barhig = (menuButtonInfo.top + menuButtonInfo.height) * 2 + 'rpx';
			}
			getCapsule()

			const getSysteminfo = () => {
				uni.getSystemInfo({
					success: res => {
						data.systemBarHeight = res.statusBarHeight;
						console.log(data.systemBarHeight, res)
					}
				});
			}
			getSysteminfo()
			// #endif
			const leftback = () => {
				uni.navigateBack({
					delta: 1
				});
			}
			const chakan = () => {
				uni.navigateTo({
					url: "/pages/home/bookingReg/bookdetails/bookdetails"
				})
			}
			const shouye = () => {
				storage.remove('hzdata')
				uni.switchTab({
					url: '/pages/home/index/index'
				});
			}
			return {
				...toRefs(data),
				leftback,
				chakan,
				shouye
			}
		}
	}
</script>

<style lang="scss">
	.status-bar {
		height: var(--status-bar-height);
		width: 100%;
		background-color: #fff;
		position: fixed;
		top: 0;

		z-index: 998999;
	}

	.header-title {
		position: fixed;
		width: 100%;
		top: var(--status-bar-height);
		z-index: 998999;

	}

	.container {
		padding: 36rpx;
		box-sizing: border-box;
		text-align: center;

		icon {
			color: #000;
		}

		.header {
			display: flex;
			flex-flow: column;

			.suc-icon {
				margin: 16rpx 0;
				font-size: 36rpx;
			}

			.text {
				color: #ccc;
				font-size: 28rpx;
			}
		}

		.footer {
			margin-top: 240rpx;

			button {
				background-color: #0066ff;
				margin-bottom: 36rpx;

				&:nth-child(2) {
					background-color: #eee;
					color: #0066ff;
				}
			}

			::v-deep button::after {
				border: none;
			}
		}
	}
</style>
